<template>
    <div class="dispute-order">
        <div class="dispute-table">
            <el-table :data="DisputeOrderListData" border style="width: 100%">
                <el-table-column prop="orderId" label="订单ID" />
                <el-table-column prop="disputerId" label="疑问发起人ID" />
                <el-table-column prop="reason" label="理由" />

                <el-table-column label="是否解决">
                    <template #default="scope">
                        <el-tag :type="scope.row.resolve === 1 ? 'primary' : 'warning'" disable-transitions>
                            {{ scope.row.resolve === 1 ? '已解决' : '未解决' }}
                        </el-tag>

                    </template>
                </el-table-column>
                
                <el-table-column label="解决方法">
                    <template #default="scope">
                        {{ scope.row.resolveMethod ? scope.row.resolveMethod : '未给出解决方法' }}
                    </template>
                </el-table-column>

            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">
import  {getDisputeOrderListAPI} from '@/api/user'
import {onMounted, ref} from "vue"
import { useUserStore } from "@/stores/user"

const userStore = useUserStore()
const userId = userStore.user.user_id
console.log("用户ID:",userId)

// 存储争议订单列表数据
const DisputeOrderListData=ref([])
// 获取争议订单列表接口
const getDisputeOrderList=async()=>{
    const res=await getDisputeOrderListAPI(userId)
    DisputeOrderListData.value=res
    console.log(DisputeOrderListData.value)
}
onMounted(()=>{
    getDisputeOrderList()
})
</script>

<style scoped lang="scss">

.dispute-order{
    width: 970px;
  margin-left: 30px;
  padding: 10px;
  background: #FAFAFA;
}

</style>